<template>
  <div class="gain">
    <Card :dis-hover="true">
      <Form ref="form_data" :model="form_data" :rules="rule_form_data">
        <FormItem label="默认红包手续费(0=无手续费)" prop="default_red_ratio">
          <Input v-model.number="form_data.default_red_ratio" placeholder="默认红包手续费(0=无手续费)" style="width: 100px;">
            <span slot="append">%</span>
          </Input>
        </FormItem>
        <FormItem label="图片红包手续费(0=无手续费)" prop="image_red_ratio">
          <Input v-model.number="form_data.image_red_ratio" placeholder="图片红包手续费(0=无手续费)" style="width: 100px;">
            <span slot="append">%</span>
          </Input>
        </FormItem>
        <FormItem label="视频红包手续费(0=无手续费)" prop="video_red_ratio">
          <Input v-model.number="form_data.video_red_ratio" placeholder="视频红包手续费(0=无手续费)" style="width: 100px;">
            <span slot="append">%</span>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submit('form_data')">确定</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
export default {
  name: 'gain-setting',
  data () {
    const validateRatio = (rule, value, callback) => {
      if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
        callback(new Error('请输入正确的手续费'))
      } else {
        callback()
      }
    }
    return {
      form_data: {
        default_red_ratio: '0.00',
        image_red_ratio: '0.00',
        video_red_ratio: '0.00'
      },
      rule_form_data: {
        default_red_ratio: [
          { validator: validateRatio, trigger: 'blur' }
        ],
        image_red_ratio: [
          { validator: validateRatio, trigger: 'blur' }
        ],
        video_red_ratio: [
          { validator: validateRatio, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    data () {
      let { default_red_ratio, image_red_ratio, video_red_ratio } = this.form_data
      return {
        default_red_ratio,
        image_red_ratio,
        video_red_ratio
      }
    }
  },
  mounted () {
    this.find()
  },
  methods: {
    // Run
    /**
     * 获取参数
     */
    find () {
      this.$get('settingGain/find')
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            let { default_red_ratio, image_red_ratio, video_red_ratio } = data
            this.form_data = {
              default_red_ratio,
              image_red_ratio,
              video_red_ratio
            }
          }
        })
    },

    // Handle
    /**
     * 提交设置参数
     */
    submit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$post('settingGain/set', {
            data: this.data
          })
            .then((res) => {
              if (res.data.code === 0) {
                this.$Message.success('设置成功')
              } else {
                this.$Message.error('设置失败')
              }
            })
        }
      })
    }
  }
}
</script>
